<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>层次选择器</title>
<script type="text/javascript" src="js/jquery-1.5.js"></script>
<script type="text/javascript">
	$(function() {
		//1.$(ancestor descendant) 选取ancestor的所有后代元素
		$("div div").text("div div");
		//2.$(parent>child)选取ancestor的所有子元素
		$("div>div").text($("div > div").text() + "子元素");
		//3.$(prev+next)选取紧接在prev后的同级next元素
		$('#div2 ').next("span").css("backgroundColor", "green");
		//$("#div2  + span").css("backgroundColor", "green");
		//4.$(prev~siblings)选取紧接在prev后的所有siblings元素
		$("#div2 ~ div").css("backgroundColor", "green");
		$("#div2").nextAll("div").css("backgroundColor", "yellow");
		//4.$(prev).siblings("div")选取prev所有同级siblings元素
		$("#div2").siblings("div").css("backgroundColor", "black");
	});
</script>
</head>
<body>
<div id="d1" style="background-color: lightblue"><span> <br />
<div style="background-color: red"></div>
</span>
<div style="background-color: red"></div>
<br />
</div>
<div id="div2"></div>
<span> span2</span>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
</body>
</html>